<style lang="scss" scoped>
.look-source {
  flex: 1;
  background: #fff;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 0;
  .video_area {
    width: 400px;
    height: 500px;
  }
}
</style>
<template>
  <div class="look-source">
    <!-- <iframe :src="video.url" frameborder="0"></iframe> -->
    <div class="video_area" :id="id"></div>
    <!-- <video controls src="http://v9-default.ixigua.com/cf6fe8573ab71f8c164c4c57a2d60cee/62a220f9/video/tos/cn/tos-cn-ve-51-alinc2/6b92f859a9124cd48c370e045ccf4a6f/?a=0&ch=0&cr=0&dr=0&lr=ad&cd=0%7C0%7C0%7C0&cv=1&br=2039&bt=2039&cs=0&ds=3&ft=dlfYl--bz7ThWQNYK1t8Z&mime_type=video_mp4&qs=0&rc=PDk4ZDg0aGRlaDw7Nzs2ZEBpanU6ZGQ6Zm5vZDMzNDYzM0A1LzZhNDIuNi4xXzMzNDJgYSNzZTUucjRfLy5gLS1kMC9zcw%3D%3D&l=202206092333500102100411341A233FF3"></video> -->
    <!-- <img :src="video.posterUrl" alt=""> -->
  </div>
</template>
<script setup>
import { onMounted, watch } from "vue";
import Player from "xgplayer";
const video = JSON.parse(window.localStorage.getItem('current_video') || '{}')
console.log('route: ', video);
const props = defineProps({
  id: {
    type: String,
    required: true,
    default: 'video'
  },
  playsinline: {
    type: Boolean,
    default: true,
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '100%'
  }
});
 
watch(
  () => props.videoUrl,
  (newUrl) => {
    initPlayer();
  },
  {
    deep: true,
  }
);
 
onMounted(() => {
  initPlayer();
});
 
// 初始化西瓜视频
const initPlayer = () => {
  let player = new Player({
    id: props.id,
    url: video.url,
    poster: video.posterUrl,
    playsinline: props.playsinline,
    height: '600px',
    width: '350px',
    // thumbnail: {
    //   pic_num: 44,
    //   width: 160,
    //   height: 90,
    //   col: 10,
    //   row: 10,
    //   urls: ["//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo-thumbnail.jpg"],
    // },
    danmu: {
      // comments: [
      //   {
      //     duration: 15000,
      //     id: "1",
      //     start: 3000,
      //     txt: "长弹幕长弹幕长弹幕长弹幕长弹幕",
      //     style: {
      //       //弹幕自定义样式
      //       color: "#ff9500",
      //       fontSize: "20px",
      //       border: "solid 1px #ff9500",
      //       borderRadius: "50px",
      //       padding: "5px 11px",
      //       backgroundColor: "rgba(255, 255, 255, 0.1)",
      //     },
      //   },
      // ],
      area: {
        start: 0,
        end: 1,
      },
    },
    whitelist: [""],
  });
  //  超清、高清、标清 分别对应的地址
  player.emit('resourceReady');
};
</script>